<!--
 * @Author: sunli
 * @Date: 2024-01-30 13:45:00
 * @LastEditors: sunli
 * @LastEditTime: 2024-02-29 13:42:08
 * @FilePath: /debug/src/views/home/index.vue
 * @Description: 
-->
<template>
  <div>
    <el-menu
      :default-active="defaultIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
      <template v-if="store.userVO?.userName">
        <el-sub-menu v-if="projectData.length" index="0">
          <template #title>当前应用 {{ projectData[projectIndex]?.name }}</template>
          <el-menu-item v-for="(item, index) in projectData" :key="item.name" :index="`0-${index}`">{{ item.name }}</el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else index="0" @click="router.push('/operation/project')">暂无应用，请创建</el-menu-item>

        <el-menu-item v-if="projectData.length" index="1" @click="router.push('/operation/echarts')">应用分析</el-menu-item>
        
        <div class="flex-grow" />
        <el-menu-item index="2" @click="router.push('/operation/project')">应用管理</el-menu-item>

        <el-sub-menu index="10">
          <template #title>{{ store.userVO?.userName }}</template>
          <el-menu-item index="usercenter" @click="register">个人中心</el-menu-item>
          <el-menu-item index="usercenter" @click="modify">密码修改</el-menu-item>
          <el-menu-item index="usercenter" @click="loginout">用户登出</el-menu-item>
        </el-sub-menu>
      </template>
      <div v-if="!store.userVO?.userName" class="flex-grow" />
      <el-menu-item v-if="!store.userVO?.userName" index="10" @click="register">{{ '请先登录！' }}</el-menu-item>
    </el-menu>

    <el-table :data="errorData" :default-sort="{ prop: 'timestamp', order: 'descending' }" style="width: 100%">
      <el-table-column prop="message" label="描述">
        <template #default="scoped">
          <template v-if="scoped.row.message">
            <div>
              <span style="font-weight: bold;font-size: 16px;">Error</span>&nbsp;
              <span>{{ scoped.row.url }}</span>
            </div>
            <p>{{ scoped.row.message }}</p>
          </template>
          <template v-if="scoped.row.tagName">
            <div>
              <span style="font-weight: bold;font-size: 16px;">Error</span>&nbsp;
              <span>{{ scoped.row.url }}</span>
            </div>
            <p>{{ scoped.row.filename }}</p>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="errorType" label="类型" width="180" />
      <el-table-column prop="timestamp" sortable label="时间" width="200">
        <template #default="scoped">
          {{ dayjs(scoped.row.timestamp).format('YYYY年MM月DD日 HH:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="70">
        <template #default="scope">
          <el-link type="primary" :underline="false" @click="router.push(`/errorDetail?_id=${scope.row._id}`)">详情</el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
/** 第三方依赖 */
import { onMounted, ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs'
import httpReq from '@/request'
import useStore from '@/store/index'
const store = useStore()

/** 网络接口 */

/** store */

/** 工具函数类 */

/** 组件类 */

const route = useRoute()
const router = useRouter()

const projectData = ref([])
onMounted(async() => {
  projectData.value = await httpReq.post('http://localhost:8092/project/list', {userName: store.userVO?.userName})

  queryError(0)
})

const defaultIndex = ref('0-0')
const projectIndex = ref(0)
const handleSelect = (key, keyPath) => {
  console.log(key);
  const index = key.split('-')[1]
  projectIndex.value = Number(index)
  queryError(index)
}



const register = () => {
  if (store.userVO?.userName) {
     router.push('/operation/person')
     return
  }

  router.push('/login')
}

const modify = () => {
  router.push('/modify')
}
const loginout = () => {
  store.userVO = null
  router.push('/login')
}

const errorData = ref([])
const queryError = async (index) => {
  if (!projectData.value.length || index === undefined) return

  // 查询当前应用 错误信息
  errorData.value = await httpReq.post('http://localhost:8092/errorReport/projectError', {KEY: projectData.value[Number(index)].KEY})
}
</script>

<style lang='scss' scoped>
.flex-grow {
  flex-grow: 1;
}
</style>